<template>
  <div>
    <el-row style="padding: 5px 0; margin-left: 40px">
      <div class="表头" style="display: flex">
        <div style="display: flex">
          <div
            style="width: 6px; background-color: aqua; border: 1px solid aqua"
          ></div>
          <div style="margin-left: 10px">数据汇总</div>
        </div>
      </div>
      <div
        style="display: flex; font-size: smaller; margin-left: 70%; width: 20%"
      >
        <button @click="changeall">全部</button>
        <button style="margin-left: 20px" @click="changeyear">当年</button>
        <button style="margin-left: 20px" @click="changemonth">当月</button>
        <button style="margin-left: 20px" @click="changeday">今日</button>
      </div>
    </el-row>
    <el-row class="隔离条">
      <el-col>
        <div style="height: 2px; width: 100%; border: 1px solid #e8e8e8"></div>
      </el-col>
    </el-row>
    <el-row style="padding: 5px 0">
      <el-col style="display: flex">
        <div
          style="
            display: flex;
            align-items: center;
            height: 170px;
            width: 340px;
            background-color: yellowgreen;
            border-radius: 5px;
            margin-left: 3%;
          "
        >
          <img
            src="/src/static/订单.png"
            alt="网络似乎出了差"
            style="
              height: 80px;
              width: 80px;
              margin-left: 30px;
              border-radius: 10px;
            "
          />
          <div style="margin-left: 20px; margin-top: 25px">
            <div style="font-size: 12px; margin-left: 8px">订单总数</div>
            <h1 style="color: white; margin-top: 5px; font-size: 35px">
              {{ orderCount }}
            </h1>
          </div>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            height: 170px;
            width: 340px;
            background-color: yellowgreen;
            border-radius: 5px;
            margin-left: 2%;
          "
        >
          <img
            src="/src/static/累计成交.png"
            alt="网络似乎出了差"
            style="
              height: 80px;
              width: 80px;
              margin-left: 30px;
              border-radius: 10px;
            "
          />
          <div style="margin-left: 20px; margin-top: 25px">
            <div style="font-size: 12px; margin-left: 8px">累计成交额</div>
            <h1 style="color: white; margin-top: 5px; font-size: 35px">
              {{ orderSum }}
            </h1>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="padding-left: 40px; border: 2px solid #e8e8e8">
      <el-col style="padding: 5px 0">
        <div class="表头" style="display: flex">
          <div style="display: flex">
            <div
              style="width: 6px; background-color: aqua; border: 1px solid aqua"
            ></div>
            <div style="margin-left: 10px; display: flex; align-items: center">
              订单来源
            </div>
          </div>
          <div class="时间选择器" style="margin-left: 75%">
            <el-date-picker
              v-model="recordDate"
              type="date"
              placeholder="Pick a Date"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              @change="get"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div style="display: flex">
          <div
            class="银行卡"
            style="margin-left: 40px; margin-top: 10px"
            v-for="(item, index) in dataList1"
            :key="index"
          >
            <div
              style="
                height: 110px;
                width: 200px;
                background-color: gold;
                padding-left: 10px;
                border-radius: 5px 5px 0 0;
              "
            >
              <div style="padding-top: 20px; font-size: 10px">
                {{ item.name }}订单数
              </div>
              <div style="display: flex; margin-top: 10px">
                <div style="font-size: 30px">{{ item.total_orders }}</div>
                <div style="padding-top: 6px; margin-left: 4px">个</div>
              </div>
              <div style="font-size: 10px; display: flex; margin-top: 10px">
                <div>金额:</div>
                {{ item.price }}元
              </div>
            </div>
            <div
              style="
                width: 200px;
                height: 30px;
                background-color: goldenrod;
                font-size: 10px;
                padding: 8px 10px;
                border-radius: 0 0 5px 5px;
              "
            >
              数据明细
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row
      style="padding-left: 40px; border: 2px solid #e8e8e8; margin-top: 30px"
    >
      <el-col style="padding: 5px 0">
        <div class="表头" style="display: flex">
          <div style="display: flex">
            <div
              style="width: 6px; background-color: aqua; border: 1px solid aqua"
            ></div>
            <div style="margin-left: 10px; display: flex; align-items: center">
              订单类型
            </div>
          </div>
          <div class="时间选择器" style="margin-left: 75%">
            <el-date-picker
              v-model="recordDate1"
              type="date"
              placeholder="Pick a Date"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              @change="get1"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div style="display: flex">
          <div
            class="银行卡"
            style="margin-left: 40px; margin-top: 10px"
            v-for="(item1, index1) in dataList2"
            :key="index1"
          >
            <div
              style="
                height: 110px;
                width: 200px;
                background-color: orange;
                padding-left: 10px;
                border-radius: 5px;
              "
            >
              <div style="padding-top: 20px; font-size: 10px">
                {{ item1.name }}
              </div>
              <div style="display: flex; margin-top: 10px">
                <div style="font-size: 30px">{{ item1.total_orders }}</div>
                <div style="padding-top: 6px; margin-left: 4px">个</div>
              </div>
              <div style="font-size: 10px; display: flex; margin-top: 10px">
                <div>金额:</div>
                {{ item1.price }}元
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getOrderCount, getOrderSource } from "@/api/system/tongji";
import { getOrderProperty } from "../../../api/system/tongji";

const orderCount = ref("");
const orderSum = ref("");
const recordTime = ref("20");
const recordDate = ref("");
const recordDate1 = ref("");
var dataList1 = ref([]);
var dataList2 = ref([]);

function get() {
  d();
}
function get1() {
  e();
}

function changeall() {
  recordTime.value = "20";
  c();
}
function changeyear() {
  recordTime.value = getCurrentYear();
  c();
}
function changemonth() {
  recordTime.value = getCurrentMonth();
  c();
}
function changeday() {
  recordTime.value = getCurrentDate();
  c();
}

const c = async () => {
  try {
    const countRes = await getOrderCount(recordTime.value);
    orderCount.value = countRes.orderr_count;
    orderSum.value = countRes.orderr_price;
  } catch (error) {
    console.error("获取订单数据时出现错误：", error);
  }
};
const d = async () => {
  try {
    const sourceRes = await getOrderSource(recordDate.value);
    dataList1.value = sourceRes;
    console.log(dataList1);
  } catch (error) {
    console.error("获取订单来源数据时出现错误：", error);
  }
};

const e = async () => {
  try {
    const PropertyRes = await getOrderProperty(recordDate1.value);
    dataList2.value = PropertyRes;
    console.log(dataList1);
  } catch (error) {
    console.error("获取订单来源数据时出现错误：", error);
  }
};

const getCurrentDate = () => {
  const currentDate = new Date();
  const year = currentDate.getFullYear();
  const month = String(currentDate.getMonth() + 1).padStart(2, "0");
  const day = String(currentDate.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};
const getCurrentMonth = () => {
  const currentDate = new Date();
  const year = currentDate.getFullYear();
  const month = String(currentDate.getMonth() + 1).padStart(2, "0");
  return `${year}-${month}`;
};
const getCurrentYear = () => {
  const currentDate = new Date();
  const year = currentDate.getFullYear();
  return `${year}`;
};
onMounted(() => {
  recordDate1.value = getCurrentDate();
  recordDate.value = getCurrentDate();
  c();
  d();
  e();
});
</script>